<template>
	<view class="main">
		<!-- 公共头部 -->
		<headerPublic style="position: fixed;" title="我的会议室" />
		<view class="top-part outbottom">
			<van-icon name="notes-o" color="#BCBCBC" size="22px" />
			<van-field v-model="beginTimeCondition" left-icon="note-o" placeholder="起始时间" readonly is-link @click="openPicker(0)" />
			<span style="color: #999999;">至</span>
			<van-field v-model="endTimeCondition" placeholder="结束时间" readonly is-link @click="openPicker(1)" />
		</view>
		<van-list
			v-model:loading="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="onLoadList"
		>
			<view class="list-card" v-for="item, index in list" :key="index">
				<view class="list-card-content">
					<text>{{item.flSubject}}</text>
					<view class="list-card-content-desc">
						<p><span>会议室：</span>{{item.meetPlace + '('+ '房间号：' + item.meetId +')'}}</p>
						<p><span>会议人数：</span>{{item.meetingNum}}</p>
						<p><span>会议时间：</span>{{item.startTime.slice(0,16)+'~'+item.endTime.slice(11,16)}}</p>
					</view>
				</view>
				<van-divider :hairline="false" style="margin: 10px 0;" />
				<view class="list-card-footer">
					<van-button class="list-card-footer-button" color="#2D75D7" round size="small" @click="goToDetail(item)">立即查看</van-button>
					<van-button class="list-card-footer-button" color="#FF6060" round plain size="small" @click="handleDelete(item)">删除</van-button>
				</view>
			</view>
		</van-list>
		
		<van-popup v-model:show="showPicker" position="bottom">
			<van-datetime-picker v-model="currentDate" type="date" :title="pickerTitle" @confirm="onConfirm" :min-date="minDate" />
		</van-popup>

	</view>
</template>

<script>
import { hyapList,deleteMeet } from '../../../api'
import { parseTime } from '../../../utils/format'
import { getCookie } from '../../../utils/js-cookie'
import { Dialog } from 'vant';
export default {
	 components: {
	    [Dialog.Component.name]: Dialog.Component
	  },
	data() {
		return {
			searchWord: '',
			loading: false,
			finished: false,
			showPicker: false,
			list: [],
			pickerTitle: '',
			currentDate: '',
			beginTimeCondition: '',
			endTimeCondition: '',
			userInfo: {},
			showDelete:false,
			deleteId: null,
			minDate: new Date(2025,0,1),
		}
	},
	onLoad() {
		this.userInfo = JSON.parse(getCookie('userInfo'))
		console.log('userInfo', this.userInfo)
	},
	methods: {
		handleDelete(e){
			this.showDelete = true
			this.deleteId = e.id
			Dialog.confirm({
			  title: '标题',
			  message: `是否确认删除会议 ${e.flSubject}`,
			  beforeClose: this.beforeClose,
				confirmButtonColor: '#2471d9'
			});
		},
		beforeClose(action, done) {
		  if (action === 'confirm') {
				deleteMeet(this.deleteId).then(res => {
					if(res.data.code == 200){
						done()
						this.onLoadList()
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}else{
						uni.showToast({
							title: '删除失败',
							icon: 'fail'
						})
						done()
					}
				})
		  } else {
		    done();
		  }
		},
		onLoadList(){
			const params = {
				pageNum: 1,
				pageSize: 99,
				beginTimeCondition: this.beginTimeCondition,
				endTimeCondition: this.endTimeCondition,
				flCreatorId: this.userInfo.userId
			}
			hyapList(params).then(res=>{
				this.list = res.data.rows
				this.loading = false
				this.finished = true
			})
		},
		openPicker(type){
			if(type==0){
				this.pickerTitle = '开始时间'
			}else if(type==1){
				this.pickerTitle = '结束时间'
			}
			this.showPicker = true
		},
		onConfirm(){
			if(this.pickerTitle.includes('开始')){
				this.beginTimeCondition = parseTime(this.currentDate, '{y}-{m}-{d}')
			}else if(this.pickerTitle.includes('结束')){
				this.endTimeCondition = parseTime(this.currentDate, '{y}-{m}-{d}')
			}
			this.showPicker = false
			this.onLoadList()
		},
		goToDetail(item){
			uni.navigateTo({
				url: `/pages/meeting/mine/detail?id=${item.id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.main {
	background-color: #f5f5f5;
	min-height: 100vh;
}
.top-part {
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	box-sizing: border-box;
	padding: 10px 12px;
	background-color: #fff;
}
.list-card {
	background-color: #fff;
	margin: 15px;
	padding: 15px;
	border-radius: 5px;
	&-header {
		display: flex;
		flex-direction: row-reverse;
	}
	&-content {
		text {
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 10px;
		}
		&-desc {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			width: 90%;
			margin-top: 13px;
			p {
				line-height: 26px;
				font-size: 14px;
				span {
					color: #999999;
				}
			}
		}
	}
	&-footer {
		display: flex;
		flex-direction: row-reverse;
		&-button {
			height: 26px;
			width: 80px;
			margin-left: 10px;
		}
	}
}
.fixed {
	position: fixed;
	bottom: 60px;
	right: 20px;
	&-button{
		color: white;
		background: rgb(45, 117, 215);
		border-color: rgb(45, 117, 215);
		box-shadow: 3px 3px 5px black;
		height: 60px;
		width: 60px;
	}
}
.outbottom {
	margin-top: 88rpx;
}
</style>
